<template>
  <view>
    <!-- <skeleton :show="show"></skeleton> -->
    <view class="colorB skeleton" style="padding:30rpx;" v-for="(item ,index) in stationList" :index="index"
      :key="index">
      <view class="mainColor border-10" style="border: 1px solid #fff;">
        <view class="flex justify-between align-center padding-10">
          <view class="text color0" style="font-weight: bolder">
            <navigator :url="'/stationList/index/index?id='+ item.id + '&stationName='+item.stationName">
              站点名称：{{item.stationName}}
            </navigator>
          </view>
        </view>
        <!-- <view class=" padding-10"> {{item.areaCode}}</view> -->
        <!-- <view class=" padding-10">站点地址：{{item.address}}</view> -->
        <view class=" padding-10">所属运营商：{{item.merchantName}}</view>
        <view class="flex justify-between align-center padding-10">
          <view class="">站点类型：{{stationtype(item.stationType)}}</view>
          <view class="">站点状态：{{stationStatus(item.stationStatus )}}</view>
        </view>
        <view class="flex justify-between align-center padding-10">
          <view class="">充电设备数量：{{item.pileNum}}</view>
          <view class="text ">管理员：{{item.merchantAdminName}}</view>
        </view>
        <view class="flex justify-between align-center">
          <view class="padding-10 flex">
            <text style="margin-right: 20rpx;">是否对外开放</text>
            <u-switch size="40" :value="item.publicFlag == 1 ?1:0" activeValue="1" inactiveValue="0"
              @change="changeFlag(item)" />
          </view>
          <view class="padding-10 flex">
            <text style="margin-right: 20rpx;">是否营业中</text>
            <u-switch size="40" :value="item.openFlag==1 ? 1:0" activeValue="1" inactiveValue="0"
              @change="changeFlag(item)" />
          </view>
        </view>
        <view class="padding-10 flex">
          <text style="margin-right: 20rpx;">是否对接高德</text>
          <u-switch size="40" :value="item.amapFlag==1 ? 1:0" activeValue="1" inactiveValue="0"
            @change="changeFlag(item)" />
        </view>
      </view>
    </view>
    <!-- 分页 -->
    <uni-pagination show-icon :page-size="queryParams.pageSize" :current="queryParams.pageNum" :total="total"
      @change="change" />
    <view class="btn-view;mainColor border-10">
      <view class="">
        <text
          class="example-info">当前页：{{ queryParams.pageNum }}，数据总量：{{ total }}条，每页数据：{{ queryParams.pageSize }}</text>
      </view>
      <view class="btn-flex ">
        <button class="button word-btn" hover-class="word-btn--hover" :hover-start-time="20" :hover-stay-time="70"
          @click="add"><text class="word-btn-white">增加10条数据</text></button>
        <button class="button" type="default" @click="reset" style="margin-left: 40rpx;">重置数据</button>
      </view>
    </view>
  </view>
</template>
<script>
  import {
    getMerchantList
  } from "@/api/pile/merchant";
  import {
    listStation,
    updateStation
  } from "@/api/pile/station";
  import {
    listModel
  } from "@/api/pile/model";
  import {
    stationOfType,
    stationStatus
  } from '@/common/dict.js'
  export default {
    data() {
      return {
        show: true,
        da: {
          star_time: ''
        },
        pileValue: 1,
        stationInp: null,
        seletedAll: false,

        checkbox1: [0],
        value: 0,
        merchant: 0,
        stationTypeList: [],
        stationStatusList: [],
        simSupp: [],
        searchVal: '',
        tableData: [],
        // 每页数据量
        pageSize: 10,
        // 当前页
        pageCurrent: 1,
        // 数据总量
        total: 0,
        loading: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          stationName: null,
          aloneApply: null,
          accountNumber: null,
          capacity: null,
          publicParking: null,
          parkingNumber: null,
          countryCode: null,
          areaCode: null,
          address: null,
          stationTel: null,
          serviceTel: null,
          stationType: null,
          stationStatus: null,
          parkNums: null,
          stationLng: null,
          stationLat: null,
          siteGuide: null,
          construction: null,
          pictures: null,
          matchCars: null,
          parkInfo: null,
          parkOwner: null,
          parkManager: null,
          openAllDay: null,
          businessHours: null,
          parkFree: null,
          payment: null,
          supportOrder: null,
          toiletFlag: null,
          storeFlag: null,
          restaurantFlag: null,
          loungeFlag: null,
          canopyFlag: null,
          printerFlag: null,
          barrierFlag: null,
          parkingLockFlag: null,
        },
        stationList: [],
        active: null,
        active1: null,
        stationActive: null,
        softwareActive: null,
        modeActive: null,
        pileActive: null,
        checkList: [],
        modelList: [],
        merchantList: [],
        softwareProtocol: []
      }
    },
    created() {
      this.getList()
      // this.$nextTick(() => {
      //   this.reloadData()
      // })
    },
    methods: {
      reloadData() {
        setTimeout(() => {
          this.show = false
        }, 1200)
      },
      changeFlag(info) {
        updateStation(info).then((response) => {
          console.log(response, 'xiugai');
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        });
      },
      add() {
        this.queryParams.pageSize += 10
        this.getList();
      },
      reset() {
        this.queryParams.pageSize = 10
        this.queryParams.pageNum = 1
        this.getList();
      },
      pileList(item, index) {
        console.log('首页点击', item, index);
      },
      getModelList() {
        listModel().then((response) => {
          this.modelList = response.rows;
          console.log('型号列表', this.modelList);
        });
      },
      seleted(e) {
        this.checkList = e.detail.value
        console.log('点击', this.checkList);
        // console.log(this.stationList[this.checkList].pileId);
        if (this.checkList.length === this.stationList.length) {
          this.seletedAll = true
        }
      },
      seletedAl() {
        if (!this.seletedAll) {
          this.seletedAll = true
          console.log(this.seletedAll);
          this.stationList.map(item => {
            this.checkList.push(item.value)
          })
        } else {
          this.seletedAll = false
          this.checkList = []
        }
      },
      bindTimeChange(e) {
        console.log('时间', e.detail.value);
        this.da.star_time = e.detail.value
      },
      changeSelectMerchant(value) {
        // 清空内容
        // this.createPile.stationId = "";
        // 通过接口查
        getStationListByMerchantId(value).then((response) => {
          console.log('站点页面 this.stationList', response.data);
          this.stationList = response.data;
        });
      },
      checkStudent(e) {
        this.merchant = e.detail.value
        console.log(this.merchant);
      },
      getMerchantList() {
        getMerchantList().then((response) => {
          this.merchantList = response.rows;
          console.log('运营商', this.merchantList);
        });
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.$refs.popup.open()
        // this.reset();
        this.getMerchantList();
        this.getList()
        this.getDicts('software_protocol').then(response => {
          console.log('软件协议software_protocol', response.data);
          this.softwareProtocol = response.data
        })
        // this.title = "批量添加设备";
        // this.open = true;
      },
      hClose() {
        this.$refs.popup.close()
      },
      getCodeToText(codeStr, codeArray) {
        if (null === codeStr && null === codeArray) {
          return null;
        } else if (null === codeArray) {
          codeArray = codeStr.split(",");
        }
      },
      stationtype(type) {
        stationOfType.then(res => {
          this.stationTypeList = res
        })
        let str = this.stationTypeList.find(item => {
          return item.dictValue == type
        })
        // console.log(str, 'str');
        if (str == undefined) {
          return '一'
        } else {
          return str.dictLabel
        }
      },
      stationStatus(type) {
        stationStatus.then(res => {
          this.stationStatusList = res
        })
        let str = this.stationStatusList.find(item => {
          return item.dictValue == type
        })
        if (str == null) {
          return '一'
        } else {
          return str.dictLabel
        }
      },
      getList() { // 查询设备管理列表
        this.queryParams.params = {};
        listStation(this.queryParams).then((response) => {
          this.stationList = response.rows;
          console.log(this.stationList, response.total, "首页信息");
          this.total = response.total;
        });
      },
      // 多选处理
      selectedItems() {
        return this.selectedIndexs.map(i => this.tableData[i])
      },
      // 多选
      selectionChange(e) {
        console.log('多选', e.detail.index)
        this.selectedIndexs = e.detail.index
      },
      //批量删除
      delTable() {
        console.log(this.selectedItems())
      },
      // 分页触发
      change(e) {
        console.log(e.current);
        this.queryParams.pageNum = e.current
        this.getList()
      },
      // 搜索
      search() {
        this.getList(1, this.searchVal)
      }
    }
  }
</script>
<style lang="scss">
  page {
    background-color: $uni-bg-color !important;
  }
</style>
<style lang="scss" scoped>
  .scroll-Y {
    height: 400rpx;
  }

  .uni-group {
    display: flex;
    align-items: center;
  }

  .goods_nav {

    display: flex;

    height: 7%;

    // margin-top: 100rpx;
    // margin-bottom: 100px;
    align-items: center;
    justify-content: space-between;

    .goods_btn {
      // height: 40px;
      width: 50%;
      text-align: center;
      line-height: 40px;
      background: #2979ff;
      border-radius: 45px;
      color: #fff;
    }

  }

  .startBtn {
    width: 50%;
    margin-right: 20rpx;
    text-align: center;
    line-height: 40px;
    border-radius: 45px;
    color: #fff;
    background-color: #2979ff;
  }
</style>